<template>
  <view class="sv-icon-select">
    <el-input v-bind="$attrs">
      <template #append>
        <el-popover placement="bottom-start" :width="popWidth" trigger="click">
          <template #reference>
            <el-button link size="small" type="primary" style="padding: 0 10px">内置图标</el-button>
          </template>
          <sv-icon-list :height="popHeight" @selected="selected"></sv-icon-list>
        </el-popover>
      </template>
    </el-input>
  </view>
</template>

<script setup>
import SvIconList from './sv-icon-list.vue'

defineProps({
  popWidth: {
    type: [String, Number],
    default: 300
  },
  popHeight: {
    type: [String, Number],
    default: 400
  }
})

const emits = defineEmits(['selected'])

function selected(e) {
  emits('selected', e)
}
</script>

<style lang="scss">
.sv-icon-select {
  width: 100%;
}
</style>
